<template>
    <div class="grandchild-box">
        <h4>孙组件 曹叡</h4>
        <p>直接从曹操那里收到的消息: {{ receivedMessage }}</p>
        <el-space>
            <el-input v-model="ruiMessage" style="width: 240px" placeholder="请输入内容" />
            <el-button @click="sendToGrandpa">给爷爷回话</el-button>
        </el-space>
    </div>
</template>

<script setup lang="ts">
import { inject, ref, type Ref } from 'vue';

const ruiMessage = ref('');

// 注入祖先提供的数据和方法
const receivedMessage = inject<Ref<string>>('family-message');
const updateGrandpaMessage = inject<(msg: string) => void>('update-grandpa-message');

const sendToGrandpa = () => {
    if (updateGrandpaMessage) {
        updateGrandpaMessage(ruiMessage.value);
    }
};
</script>

<style scoped>
.grandchild-box {
    padding: 10px;
    margin: 10px;
    border: 1px solid #eee;
    background-color: #f0f9eb;
}
</style>